<template>
  <div class="home">
    <el-container class="container">
      <el-aside width="">
        <a href="https://www.csust.edu.cn"><img title="logo" alt="logo" src="../../assets/csust_log.png"></a>
        <h3 style="font-family: 'Microsoft YaHei',serif;">MongoDB Web 图形化管理器</h3>
        <el-menu ref="menu" :default-active="$route.path" @select="sel">
          <el-menu-item index="/newConnection">
            <i class="el-icon-plus"></i>
            <span slot="title">新建连接</span>
          </el-menu-item>
          <el-menu-item index="/save">
            <i class="el-icon-star-on"></i>
            <span slot="title">保存的连接</span>
          </el-menu-item>
          <el-menu-item index="/recent">
            <i class="el-icon-refresh-left"></i>
            <span slot="title">最近的连接</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-header>
          <Header></Header>
        </el-header>
        <router-view/>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import Header from "@/components/Header.vue";

export default {
  name: 'Home',
  components: {Header},
  data() {
    return {}
  },
  methods: {
    sel(index) {
      let home = '/newConnection'
      if (index !== home && this.$store.getters.getToken === null) {
        this.$message.error('请登录后再进行操作！')
        this.$router.push(home)
        this.$refs.menu.activeIndex = home
      } else {
        this.$router.push(index)
      }
    }
  }
}
</script>

<style>
.container {
  min-height: 955px;
}
</style>
